<template>
  <div>
    <router-link to="/modified">
      <div class="profile" v-if="userInfo">
        <img
          v-if="userInfo.head_img"
          :src=" 'http://127.0.0.1:3000' + userInfo.head_img"
          alt
          class="avatar"
        />
        <img v-else src="@/assets/logo.png" alt class="avatar" />
        <div class="info">
          <div class="name">
            <span class="iconfont iconxingbienan" v-if="userInfo.gender == 1"></span>
            <span class="iconfont iconxingbienv" v-else></span>
            {{userInfo.nickname}}
          </div>
          <div class="date">{{userInfo.create_date.split('T')[0]}}</div>
        </div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </router-link>
    <NavBar labelText="我的跟帖" descText="发布的所有回复" @barClick="handleBar('跟帖')" />
    <NavBar labelText="我的关注" descText="关注的用户" @barClick="handleBar('关注')" />
    <NavBar labelText="我的收藏" descText="文章/视频" @barClick="handleBar('收藏')" />
    <NavBar labelText="设置" descText @barClick="handleBar('设置')" />
    <NavBar labelText="退出" descText @barClick="handleBar('退出')" />
  </div>
</template>
<script>
import logo from "@/assets/logo.png";
import NavBar from "@/components/NavBar.vue";
// import { router } from "../../../../src/middleware/request";

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userInfo: null
    };
  },
  mounted() {
    this.$axios({
      url: "http://127.0.0.1:3000/user/" + localStorage.getItem("userId"),
      method: "get",
      headers: {
        Authorization: "Bearer " + localStorage.getItem("token")
      }
    }).then(res => {
      const { message, data } = res.data;
      if (message == "获取成功") {
        this.userInfo = data;
        console.log(this.userInfo);
      }
      //  else if (message == "用户信息验证失败") {
      //   localStorage.removeItem("token");
      //   localStorage.removeItem("userId");
      //   this.$router.replace({ path: "/login" });
      // } else {
      //   this.$toast.fail("获取失败");
      // }
    });
  },
  methods: {
    handleBar(pageName) {
      console.log(pageName);
      if (pageName == "退出") {
        // localStorage.removeItem("token");
        // localStorage.removeItem("userId");
        this.$router.replace({ path: "/" });
      } else if (pageName == "关注") {
        this.$router.replace({ path: "/follows" });
      } else if (pageName == "收藏") {
        this.$router.replace({ path: "/collect" });
      } else if (pageName == "设置") {
        this.$router.replace({ path: "/Setting" });
      }
    }
  }
};
</script>


<style lang="less" scoped>
.profile {
  display: flex;
  align-items: center;
  padding: 6.67vw;

  border-bottom: 1.11vw solid #e4e4e4;
  .avatar {
    width: 19.44vw;
    height: 19.44vw;
    object-fit: cover;
    border-radius: 50%;
  }
  .info {
    flex: 1;
    padding-left: 2.78vw;
    font-size: 3.89vw;
    .name {
      .iconxingbienv {
        color: #f13bb8;
        font-size: 3.89vw;
      }
      .iconxingbienan {
        color: #6fb0df;
        font-size: 3.89vw;
      }
    }
    .date {
      padding-top: 1.67vw;
      color: #bbb;
    }
  }
}
</style>